<template>
    <div class="box">
        <van-nav-bar title="全部历史记录" left-arrow
  @click-left="onClickLeft"  >
             <van-nav-bar
  
  left-arrow
  @click-left="onClickLeft"
  size="18px" color="#000"
/>   
  <van-icon name="upgrade" slot="right"  size="18px" color="#000" />
</van-nav-bar>
  <ul class="box2" ref="top">
  
    <van-tabs type="card" color="#000" animated swipeable>
  <van-tab title="总" class="zhan1">
    <a>累计训练</a>
    <p><a>0</a>分钟</p>
    <p class="zhan"><span>参与/天<a>0</a></span><span>次数<a>0</a></span><span>消耗大卡<a>0</a></span></p>
     </van-tab>
  <van-tab title="月 "> <a>累计训练</a>
    <p><a>0</a>分钟</p>
    <p class="zhan"><span>参与/天<a>0</a></span><span>次数<a>0</a></span><span>消耗大卡<a>0</a></span></p></van-tab>
  <van-tab title="周"> <a>累计训练</a>
    <p><a>0</a>分钟</p>
    <p class="zhan"><span>参与/天<a>0</a></span><span>次数<a>0</a></span><span>消耗大卡<a>0</a></span></p></van-tab>
  <van-tab title="日"> <a>累计训练</a>
    <p><a>0</a>分钟</p>
    <p class="zhan"><span>参与/天<a>0</a></span><span>次数<a>0</a></span><span>消耗大卡<a>0</a></span></p></van-tab>

</van-tabs>

 </ul>
<div class="box3">
 <p>好友排名<span><van-icon name="manager" slot="right" size="14px" />-<van-icon name="arrow" /></span></p>
 
  <p>等级训练<span>lv0<van-icon name="arrow" /></span></p>

  <p>我的勋章<span>0<van-icon name="arrow" /></span></p>
 
  <p>训练记录<span><van-icon name="arrow" /></span></p>
</div>
<router-view></router-view>





    </div>
</template>

<script>
export default {
    name:'Mylishi',
    methods:{
      onClickLeft(){
        console.log(1)
        this.$router.go(-1)
      },
     },
    


}
</script>

<style scoped>
body{
  background: #ccc
}

  .box{width: 100%;overflow: hidden;box-sizing: border-box;}
 
  .box2 {
    
  
  background: #fff;
box-sizing: border-box;
padding:40px 10px 0 10px

  }
.zhan {
    display: flex;
    justify-content: space-between;
  background: #fff




}
.zhan span{
 display: flex;
 flex-direction: column;
 justify-items: center;
 font-size: 14px

}
.zhan span a{
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  font-weight: bold


}
.van-tab__pane{
  margin-top:10px ;
  border-bottom: 1px solid #ccc
}
.van-tab__pane>a{
  font-size: 12px
}
.van-tab__pane p:nth-of-type(1){
  text-align: center;
 line-height: 50px


}
.van-tab__pane p:nth-of-type(1) a{

 font-size: 30px;
 font-weight: bold;

}
.box3{

box-sizing: border-box;
overflow: hidden;

}
.box3 p {
  margin:0px ;
   background: #fff;
padding:10px 10px 10px 10px;
margin-bottom:10px;
font-size: 14px;
display: flex;
justify-content: space-between 

}
.van-tab__pane-wrapper{
  margin: 30px 0 30px 0
}

</style>
